<template>
  <div>
    <p class="item">运费模板管理</p>
    <el-select v-model="value" placeholder="+运费模板管理">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <p class="illustrate">运费模板帮助说明</p>
    <br />
    <br />
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="模板名称" width="180" />
      <el-table-column prop="name" label="包邮地区" width="180" />
      <el-table-column prop="address" label="不包邮地区" width="180" />
      <el-table-column prop="rule" label="运费规则" />
      <el-table-column prop="time" label="最后编辑时间" width="180" />
      <el-table-column prop="template" label="操作" />
      <el-table-column prop="edit" label=" " style="color: blue" />
    </el-table>
  </div>
  <br />
  <br />
  <div>
    <p class="item">配送区域模板管理</p>
    <el-select v-model="value" placeholder="+添加配送区域模板">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <p class="illustrate">配送区域模板帮助说明</p>
    <br />
    <br />
    <el-table :data="tableDataList" stripe style="width: 100%">
      <el-table-column prop="date" label="模板名称" width="180" />
      <el-table-column prop="name" label="包邮地区" width="180" />
      <el-table-column prop="time" label="最后编辑时间" width="180" />
      <el-table-column prop="template" label="操作" />
      <el-table-column prop="edit" label=" " />
    </el-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const value = ref("");
    const options = [
      {
        value: "包邮",
        label: "包邮",
      },
      {
        value: "包邮(偏远地区除外)",
        label: "包邮(偏远地区除外)",
      },
      {
        value: "默认运费模板",
        label: "默认运费模板",
      },
      {
        value: "自定义运费模板",
        label: "自定义运费模板",
      },
    ];
    const options1 = [
      {
        value: "不限制配送区域模板",
        label: "不限制配送区域模板",
      },
      {
        value: "自定义配送区域模板",
        label: "自定义配送区域模板",
      },
    ];
    const tableData = [
      {
        date: "包邮",
        name: "全国",
        address: "---",
        rule: "---",
        time: "2020-10-20  13:50",
        template: "默认模板",
        edit: "编辑",
      },
      {
        date: "包邮(偏远地区除外)",
        name: "---",
        address: "港澳台、新疆、内蒙古、西藏",
        rule: "10件内0元,每增加一件运费增加8元",
        time: "2020-10-20  13:50",
        template: "默认模板",
        edit: "编辑",
      },
      {
        date: "默认运费模板",
        name: " ",
        address: " ",
        rule: "10件内0元,每增加一件运费增加8元",
        time: "2020-10-20  13:50",
        template: "默认模板",
        edit: "编辑",
      },
      {
        date: "自定义运费模板",
        name: " ",
        address: " ",
        rule: " ",
        time: " ",
        template: "默认模板",
        edit: "编辑",
      },
    ];
    const tableDataList = [
      {
        date: "不限制配送区域模板",
        name: "全国",
        address: "---",
        time: "2020-10-20  13:50",
        template: "默认模板",
        edit: "编辑",
      },
      {
        date: "包邮(偏远地区除外)",
        name: "---",
        address: "---",  
        time: "2020-10-20  13:50",
        template: "默认模板",
        edit: "编辑",
      },
    ];
    return {
      value,
      options,
      options1,
      tableData,
      tableDataList,
    };
  },
});
</script>
<style lang="less" scoped>
.item {
  font-size: 16px;
  font-weight: bolder;
  padding-left: 7px;
  margin-bottom: 20px;
  border-left: 3px solid blue;
  span {
    font-size: 12px;
  }
}
.illustrate {
  float: right;
  color: #3080ee;
}
</style>